// 配额申请详情列表
import * as React from 'react';
import { useRef, useState, useEffect } from 'react';
import { getBrandSelectList, getDealerListByBrand } from '@/common/Request'
import './index.scss';
import { Button, Col, Form, Input, Row, DatePicker, Table, Select } from 'antd';
import { http } from '@/lib';
import apis from '@/apis/Report';

// 标题
const HeaderTitle = (props) => {
    const { onReturn } = props;
    return (
        <div>
            <Row align="middle" justify="space-around" gutter={24}>
                <Col offset={0} span={4}>
                    <span  className="AppliedCustomerList-QuotaAppliedDetailList-header-title">配额申请详情列表</span>
                </Col>
                <Col offset={18} span={2}>
                    <Button onClick={() => {
                        onReturn();
                    }} type="primary">返回</Button>
                </Col>
            </Row>
           
        </div>
    )
} 

const QuotaAppliedDetailList = (props) => {
    const { state } = props.location;
    const [dealerName, setDealerName] = useState('--')
    const [quotaTerm, setQuotaTerm] = useState('--')
    console.log(state);
    useEffect(() => {
        sessionStorage.getItem('dealerName') || sessionStorage.setItem('dealerName', state.dealerName);
        setDealerName(state?.dealerName || sessionStorage.getItem('dealerName'));
        if (state?.quotaStartTime && state?.quotaEndTime) {
            let start = state.quotaStartTime.split('-');
            start[2] = start[2].split(' ')[0];
            let end = state.quotaEndTime.split('-');
            end[2] = end[2].split(' ')[0];
            let s:string = '';
            start.forEach(item => {
                s += item + '-';
            })
            end.forEach((item, index) => {
                index !== end.length - 1 ? s += item + '-' : s += item;
            })
            s.slice(-1);
            sessionStorage.setItem('quotaTerm', s);
        }
        sessionStorage.getItem('quotaTerm') && setQuotaTerm(sessionStorage.getItem('quotaTerm'));
        // {
        //     // sessionStorage.setItem('quotaTerm', state.dealerName);
        //     if (sessionStorage.getItem('dealerName') && sessionStorage.getItem('quotaTerm')) {
        //         setDealerName(sessionStorage.getItem('dealerName'))
        //         setQuotaTerm(sessionStorage.getItem('quotaTerm'))
        //         return;
        //     } else {
        //       setQuotaTerm(() => {
                
        //             if (!state.quotaStartTime || !state.quotaEndTime) {
        //                 return '--';
        //             }
        //             let start = state.quotaStartTime.split('-');
        //             start[2] = start[2].split(' ')[0];
        //             let end = state.quotaEndTime.split('-');
        //             end[2] = end[2].split(' ')[0];
        //             let s:string = '';
        //             start.forEach(item => {
        //                 s += item + '-';
        //             })
        //             end.forEach((item, index) => {
        //                 index !== end.length - 1 ? s += item + '-' : s += item;
        //             })
        //             s.slice(-1);
        //             return s;
        //         })
                
        //     }
            
        //     // setQuotaTerm(state.quotaTerm)
        // }
        return () => {
            sessionStorage.removeItem('dealerName');
            sessionStorage.removeItem('quotaTerm');
        }
    }, [])
    
    
    // 设置table的标题样式
    // const TableTitleStyle = {fontWeight:'bolder', color:'#000', textAlign: 'center', alignItems: 'center'} as any;
    const TableTitleStyle = {} as any;
    // table的列标题
    const columns = [
        {
            title: <span style={TableTitleStyle}>序号</span>,
            key: 'number',
            align: 'center',
            render: (text, record, index) => {
                return <span>{(pagination.current-1) * pagination.pageSize + index + 1}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>物料分类代码</span>,
            key: 'productGroupId',
            dataIndex: 'productGroupId',
            align: 'center',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>物料分类名称</span>,
            key: 'groupName',
            dataIndex: 'groupName',
            align: 'center',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>当前动销</span>,
            key: 'nowMove',
            dataIndex: 'nowMove',
            align: 'center',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>理论配额值/件</span>,
            key: 'quotaCountNum',
            dataIndex: 'quotaCountNum',
            align: 'center',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
        {
            title: <span style={TableTitleStyle}>申请配额值/件</span>,
            key: 'quotaNum',
            dataIndex: 'quotaNum',
            align: 'center',
            render: (text, record, index) => {
                return <span>{text === null ? '--' : text}</span>
            }
        },
    ]
    // table的dataSource
    const [dataSource, setDataSource] = useState([]);
    // table的loading
    const [loading, setLoading] = useState(false);
    let pathnameStr = props.history.location.pathname.split('/');
    let id = pathnameStr[pathnameStr.length - 1];
    // table的pagination
    const [pagination, setPagination] = useState({
        page: 1, current: 1, pageSize: 10, showSizeChanger: true, showQuickJumper: true, pageSizeOptions: ['10', '20', '40', '60', '100', '150', '200'], total: 0,
        showTotal: (total, range) => `当前${range[0]}-${range[1]},共${total}项`
    });
    // 从服务器获取数据
    useEffect(() => {
        setLoading(true);
        // 网络请求
        http.get(apis.QuotaApplicationListForDetails, {params: {id:id, page: pagination.page, size: pagination.pageSize}})
            .then(res => {
                let data = res.data.content;
                data.forEach((item, index) => {
                    item.key = index;
                });
                setDataSource(data);
                setPagination({...pagination, total: res.data.totalElements});
                setLoading(false);
            })
            .catch(err => {
                setLoading(false);
            })
        
    }, [pagination.pageSize, pagination.page])
    // useEffect(() => {
    //     sessionStorage.getItem('dealerName') || sessionStorage.setItem('dealerName', dealerName);
    //     sessionStorage.getItem('quotaTerm') || sessionStorage.setItem('quotaTerm', quotaTerm);
    // }, [])
    // 返回上级页面的方法
    const onReturn = () => {
        props.history.go(-1);
        sessionStorage.removeItem('dealerName');
            sessionStorage.removeItem('quotaTerm');
    }
    return (
        <React.Fragment>
            <HeaderTitle onReturn={onReturn}/>
            <div className="QuotaAppliedDetailList-table-top-description">
                <Row align="middle" justify="start">
                    <Col offset={1} span={11}>
                        <span>客户名称： {dealerName}</span>
                    </Col>
                    <Col offset={1} span={11}>
                        <span>配额有效期： {quotaTerm}</span>
                    </Col>
                </Row>
            </div>
            <Table 
                loading={loading}
                columns={columns as any}
                pagination={pagination}
                dataSource={dataSource}
                onChange={(pageOptions) => {
                    setPagination({
                        ...pagination,
                        pageSize: pageOptions.pageSize,
                        current: pageOptions.current,
                        page: pageOptions.current,
                    })
                }}
            />
        </React.Fragment>
    )
}

export default QuotaAppliedDetailList;